<template>
  <div class="container">
    <div class="trans">
      <el-transfer
          style="margin-top: 10%; margin-left: 27%; transform: scale(1.2)"
          filterable
          :filter-method="filterMethod"
          filter-placeholder="please check object"
          v-model="value"
          :data="data">
      </el-transfer>
      <div style="width: 100px; height: 50px; margin-top: 30%; margin-left: -28%; transform: scale(1.3)">
        <Ripple @click="objectDetect()"></Ripple>
      </div>
    </div>
  </div>
</template>

<script>
import Ripple from "@/components/Ripple.vue";
import request from "@/utils/request";

export default {
  name: "Page2",
  components: {Ripple},
  data() {
    const generateData = _ => {
      const data = [];
      const cities = ['person', 'bicycle'];
      const pinyin = ['person', 'bicycle'];
       cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      data: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      },
      objects: []
    };
  },
  methods:{
    objectDetect(){
      this.objects = []
      this.value.forEach(index => {
        if (index >= 0 && index < this.data.length) {
          this.objects.push(this.data[index].label);
        }
      });
      request.post("/recognition/add_objects/", {data: this.objects}).then(res=>{
        if(res.code === 200){
          this.$message({
            type:"success",
            message:"Success!"
          })
        }else{
          this.$message({
            type:"error",
            message:"Server error"
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.trans {
  height: 90%;
  width: 90%;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
  flex-wrap: wrap;
  margin: 2% 5% 5%;
}
</style>
